<template>
    <div class="customer-page">
        <div class="customer-service-wrap" :class="{ mini: isMini, theme }">
            <div v-if="!isMini" class="customer-close" @click="fnMini(true)">
                <i class="iconfont icon-close"></i>
            </div>
            <div class="customer-wrap">
                <div class="customer-head" @click="fnMini(false)">
                    <div class="customer-head-circle1"></div>
                    <div class="customer-head-circle2"></div>
                    <div class="customer-head-img"></div>
                </div>
                <div class="customer-title mini-hide">有问必答哦～</div>
                <div class="customer-btn mini-hide" @click="fnShowCustomer()">
                    点击咨询
                </div>
                <div class="customer-qrcode-wrap mini-hide">
                    <img
                        class="customer-qrcode"
                        src="//cdn.zsdx.cn/zsdx-website/2020/images/common/qr_zx2.jpg"
                    />
                </div>
                <div class="customer-qrcode-tip mini-hide">还可以扫码咨询</div>
            </div>
        </div>
        <div
            v-if="firstShow"
            class="customer-dialog-wrap"
            :class="{ 'show-customer-wrap': showCustomerDialog }"
            @mousewheel.prevent.stop="fnStop()"
            @keyup.esc="fnCloseCustomer()"
        >
            <iframe
                id="customerDialog"
                class="frame"
                :class="{ 'show-customer': showCustomerDialog }"
                frameborder="no"
                border="0"
                scrolling="no"
                allowtransparency="yes"
                :src="customerDomain + '/customer.html'"
                @click.prevent.stop="fnStop()"
            ></iframe>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    components: {},
    data() {
        return {
            firstShow: false,
            isMini: false,
            showCustomerDialog: false,
            customerDomain: 'https://fastadmin.wxhand.com'
        }
    },
    computed: {
        ...mapState({
            theme: (state) => state.header.style
        })
    },
    created() {},
    mounted() {
        // eslint-disable-next-line no-undef
        this.firstShow = true
        const customerMini = localStorage.getItem('customerMini')
        this.isMini = !!customerMini
        window.addEventListener('message', (msg) => {
            if (msg.data.action == 'close') {
                this.fnCloseCustomer()
            }
        })
    },
    methods: {
        fnStop() {
            return false
        },
        fnCloseCustomer() {
            this.showCustomerDialog = false
            // 如果用户没有设置最小化,则关闭对话窗自动还原按钮
            if (!localStorage.getItem('customerMini')) {
                this.fnMini(false, true)
            }
        },
        fnMini(mini, isAuto = false) {
            this.isMini = mini
            if (mini) {
                if (!isAuto) {
                    localStorage.setItem('customerMini', 'true')
                }
            } else {
                if (!isAuto) {
                    localStorage.setItem('customerMini', '')
                }
                this.showCustomerDialog = false
            }
        },
        fnShowCustomer() {
            this.showCustomerDialog = true
            document
                .getElementById('customerDialog')
                .contentWindow.postMessage(
                    { action: 'show' },
                    this.customerDomain
                )
            this.fnMini(true, true)
        }
    }
}
</script>

<style lang="less" scoped>
@keyframes circleRange {
    0% {
        width: 96px;
        height: 96px;
        opacity: 1;
    }
    50% {
        width: 120px;
        height: 120px;
    }
    100% {
        width: 120px;
        height: 120px;
        opacity: 0;
    }
}
@keyframes circleRange2 {
    0% {
        width: 84px;
        height: 84px;
        opacity: 1;
    }
    15% {
        width: 84px;
        height: 84px;
    }
    80% {
        width: 120px;
        height: 120px;
    }
    100% {
        width: 120px;
        height: 120px;
        opacity: 0;
    }
}
.customer-dialog-wrap {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    transform: translate(-9999, -9999);
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}
.frame {
    background: transparent;
    border-radius: 4px;
    width: 900px;
    height: 718px;
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: -1;
    opacity: 0;
    transform: translate(-9999px, -9999px);
}
.customer-service-wrap {
    width: 116px;
    height: 320px;
    position: fixed;
    right: 48px;
    bottom: 132px;
    z-index: 10;
    transition: right 0.3s ease-in-out;
    &.mini {
        right: 20px;
        transition: right 0.3s ease-in-out 0.5s;
        .customer-wrap {
            max-height: 116px;
            border-radius: 116px;
            background: rgba(32, 160, 255, 0);
            transition: max-height 0.3s ease-in-out,
                border-radius 0.3s ease-in-out 0.2s,
                background 0.3s ease-in-out 0.1s;
        }
        .customer-head {
            cursor: pointer;
            &:hover {
                .customer-head-circle1 {
                    width: 72px;
                    height: 72px;
                    animation: circleRange 0.9s 0s ease-out infinite;
                }
                .customer-head-circle2 {
                    width: 72px;
                    height: 72px;
                    animation: circleRange2 0.9s 0s linear infinite;
                }
            }
        }
    }
}
.customer-close {
    position: absolute;
    right: 0;
    top: 0px;
    width: 16px;
    height: 16px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    .iconfont {
        width: 16px;
        height: 16px;
        font-size: 16px;
        line-height: 16px;
        color: #fff;
        text-align: center;
    }
}
.customer-wrap {
    max-height: 320px;
    width: 100%;
    height: 100%;
    border-radius: 100px 100px 0px 0px;
    background: rgba(32, 160, 255, 1);
    text-align: center;
    transition: max-height 0.3s ease-in-out 0.3s,
        border-radius 0.3s ease-in-out 0.3s, background 0.3s ease-in-out;
    overflow: hidden;
}
.customer-head {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 10px auto 0;
    &-circle1 {
        width: 96px;
        height: 96px;
        border-radius: 96px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: rgba(144, 223, 159, 0.2);
    }
    &-circle2 {
        width: 84px;
        height: 84px;
        border-radius: 84px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

        background: rgba(144, 223, 159, 0.2);
    }
    &-img {
        width: 72px;
        height: 72px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-image: url(//cdn.zsdx.cn/zsdx-website/2020/images/customer/customer-header.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
}
.customer-title {
    height: 14px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 14px;
    margin: 16px auto 0;
    text-align: center;
}
.customer-btn {
    width: 84px;
    height: 32px;
    background: rgba(255, 196, 32, 1);
    box-shadow: 0px 2px 4px 0px rgba(2, 61, 174, 0.77);
    border-radius: 4px;
    margin: 16px auto 0;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    line-height: 32px;
    text-align: center;
    cursor: pointer;
    user-select: none;
}
.customer-qrcode-wrap {
    width: 84px;
    height: 84px;
    background: rgba(255, 255, 255, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 16px auto 0;
}
.customer-qrcode {
    width: 76px;
    height: 76px;
    background: #ececec;
}
.customer-qrcode-tip {
    height: 12px;
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 12px;
    margin-top: 8px;
    text-align: center;
}
.show-customer-wrap {
    opacity: 1;
    z-index: 10000;
    transform: translate(0, 0);
}
.show-customer {
    opacity: 1;
    z-index: 10000;
    transform: translate(-50%, -50%);
}
</style>
